import 'dart:io';
import 'dart:ui';
import 'package:app/components/TimeCounter.dart';
import 'package:app/model/model.dart';
import 'package:app/utils/utils.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mobkit_dashed_border/mobkit_dashed_border.dart';

class TimeView extends StatefulWidget {
  final bool isMin;
  final ChildrenEvent childrenEvent;
  final VoidCallback? onTap;
  final VoidCallback? onLongPress;
  final bool disableTap;
  const TimeView({
    super.key,
    this.isMin = false,
    required this.childrenEvent,
    this.onTap,
    this.onLongPress,
    this.disableTap = false,
  });

  @override
  State<TimeView> createState() => _TimeViewState();
}

class _TimeViewState extends State<TimeView> {
  final RxInt tag = 4.obs;
  late BoxConstraints constraints;
  final Color transparent = Colors.transparent;
  String calculateDisplayText(int value) {
    return Utils.calculateDays(
      widget.childrenEvent.targetTimestamp.value,
      DateTime.now().millisecondsSinceEpoch,
      value,
    );
  }

  double calculateFontSize(String text) {
    if (widget.isMin || text.isEmpty) return 50;
    return text.length < 3 ? 100 : constraints.maxWidth / text.length;
  }

  Color getTopColor() {
    return widget.childrenEvent.imgUrl.value.isEmpty
        ? widget.childrenEvent.eventColor.value
        : transparent;
  }

  Color getMiddleColor() {
    return widget.childrenEvent.imgUrl.value.isEmpty
        ? Colors.white
        : transparent;
  }

  Color getBottomColor() {
    return widget.childrenEvent.imgUrl.value.isEmpty
        ? const Color(0xFFF8F8F8)
        : transparent;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.isMin ? 150 : 300,
      width: widget.isMin ? 150 : 336.75,
      child: GestureDetector(
        onTap: widget.isMin ? widget.onTap : null,
        onLongPress: widget.isMin ? widget.onLongPress : null,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Positioned(
              height: widget.isMin ? 150 : 300,
              width: widget.isMin ? 150 : 336.75,
              child: Obx(() {
                if (widget.childrenEvent.imgUrl.value.isEmpty) {
                  return SizedBox.shrink();
                }
                var blurRadius = widget.childrenEvent.blurRadius.value;
                return ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: ImageFiltered(
                    imageFilter: ImageFilter.blur(
                      sigmaX: blurRadius,
                      sigmaY: blurRadius,
                    ),
                    child: Image.file(
                      File(widget.childrenEvent.imgUrl.value),
                      fit: BoxFit.cover,
                    ),
                  ),
                );
              }),
            ),
            Positioned(
              height: widget.isMin ? 150 : 300,
              width: widget.isMin ? 150 : 336.75,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: Column(
                  children: [
                    // Event name section
                    Expanded(
                      flex: 2,
                      child: Obx(
                        () => Container(
                          color: getTopColor(),
                          child: Center(
                            child: Text(
                              widget.childrenEvent.name.value,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                fontSize: widget.isMin ? 15 : 25,
                                fontWeight: FontWeight.bold,
                                color: widget.childrenEvent.textColor.value,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    // Countdown section
                    Expanded(
                      flex: 6,
                      child: Container(
                        decoration: BoxDecoration(
                          color: getMiddleColor(),
                          border: DashedBorder(
                            dashLength: 1,
                            bottom: BorderSide(color: Colors.black12, width: 1),
                          ),
                        ),
                        child: GestureDetector(
                          onTap: () {
                            if (widget.isMin || widget.disableTap) return;
                            tag.value = tag.value == 1 ? 4 : tag.value - 1;
                          },
                          child: Column(
                            children: [
                              Expanded(
                                child: Center(
                                  child: LayoutBuilder(
                                    builder: (ctx, constraints) {
                                      this.constraints = constraints;
                                      return Obx(() {
                                        var displayText = calculateDisplayText(
                                          tag.value,
                                        );
                                        var fontSize = calculateFontSize(
                                          displayText,
                                        );
                                        return Text(
                                          displayText,
                                          style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: fontSize,
                                            color:
                                                widget
                                                    .childrenEvent
                                                    .textColor
                                                    .value,
                                          ),
                                        );
                                      });
                                    },
                                  ),
                                ),
                              ),
                              Obx(
                                () =>
                                    widget.childrenEvent.isprecise.value
                                        ? TimeCounter(
                                          targetTimestamp:
                                              widget
                                                  .childrenEvent
                                                  .targetTimestamp
                                                  .value,
                                          isMin: widget.isMin,
                                          color:
                                              widget
                                                  .childrenEvent
                                                  .textColor
                                                  .value,
                                        )
                                        : const SizedBox.shrink(),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    // Target date section
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: getBottomColor(),
                        child: Center(
                          child: Obx(
                            () => Text(
                              "目标日: ${Utils.formatDate(widget.childrenEvent.targetTimestamp.value, 'yyyy-MM-dd e')}",
                              style: TextStyle(
                                fontSize: widget.isMin ? 10 : 12,
                                color: widget.childrenEvent.textColor.value,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
